<template>
  <div class="main_box" style="padding:10px;">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList" > 返 回</el-button>
      </div>
      <el-form :model="appointForm" ref="appointForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="项目分类">
          <el-cascader clearable :options="pickClassifyList"
                       :props="{ expandTrigger: 'hover' }"
                       class="filter-item"  style="width: 200px" v-model="pickClassifyIdList"
                       placeholder="请选择分类" filterable>
          </el-cascader>
          </el-form-item>

          <el-form-item label="项目名称" prop="itemName">
            <el-input v-model="appointForm.itemName"></el-input>
          </el-form-item>
          <el-form-item label="收费价格" prop="itemPrice">
            <el-input v-model="appointForm.itemPrice"></el-input>
          </el-form-item>
          <el-form-item label="时长" prop="itemTime">
            <el-input v-model="appointForm.itemTime"></el-input>
          </el-form-item>
          <el-form-item label="临床意义" prop="itemMeaning">
            <el-input v-model="appointForm.itemMeaning"></el-input>
          </el-form-item>
          <el-form-item label="注意事项" prop="itemNote">
            <el-input type="textarea" v-model="appointForm.itemNote" placeholder="请输入注意事项"></el-input>
          </el-form-item>
          <el-form-item label="检测流程" prop="itemProcess">
            <el-input type="textarea" v-model="appointForm.itemProcess" placeholder="请输入检测流程"></el-input>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>医检机构</h2>
        </div>
        <el-row>
          <el-form-item
            label="医检机构"
            prop="institutionId"
          >
            <el-select
              v-model="appointForm.institutionId"
              filterable
              clearable
              reserve-keyword
              :loading="loadingIns"
              placeholder="请选择医检机构"
              @change="institutionChange"
            >
              <el-option
                v-for="item in pickInstitutionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="科室名称" prop="insOfficeId">
            <el-select
              v-model="appointForm.insOfficeId"
              clearable
              reserve-keyword
              placeholder="请选择科室"
            >
              <el-option
                v-for="item in pickInsOfficeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="医检项目编号" prop="insItemCode">
            <el-input v-model="appointForm.insItemCode"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button
              type="primary"
              @click="sureReportClick"
            >保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from '@/constants/message';
import AppointItemApi from "@/api/appoint/appointItem";
import InstitutionApi from "@/api/institution/institution";
import OfficeApi from "@/api/institution/office";
export default {
  data () {
    return {
      loadingIns: false,
      loadingCla: false,
      pickInstitutionList: [],
      pickInsOfficeList: [],
      pickClassifyList: [],
      pickClassifyIdList: [],
      disabled: false,
      isCenter: true,
      appointForm: {
        itemId: '',
        itemName: '',
        institutionId: '',
        insOfficeId: '',
        insItemCode: '',
        firstClassifyId: '',
        classifyId: '',
        itemPrice: '',
        itemProcess: '',
        itemNote: '',
        itemMeaning: '',
        itemTime: ''
      },
      roleRules: {
        classifyId: [
          {
            required: true,
            message: '请选择项目分类',
            trigger: 'change'
          }
        ],
        itemName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        itemPrice: [
          {
            required: true,
            message: '请输入项目收费价格',
            trigger: 'blur'
          }
        ],
        institutionId: [
          {
            required: true,
            message: '请选择医检机构',
            trigger: 'change'
          }
        ]
      }
    }
  },
  components: {
  },
  methods: {
    init () {
      if (this.$route.query.id) {
        this.listClassifyTree()
        this.listInstitution()
        this.getData()
      }
    },
    listClassifyTree () {
      let _this = this
      AppointItemApi.listItemClassifyTree()
        .then(res => {
          _this.pickClassifyList = res.data
        });
    },
    listInstitution () {
      let _this = this
      _this.loadingIns = true
      let cond = {
        institutionType: 1,
      }
      InstitutionApi.getInstitutionNameList(cond)
        .then(res => {
          setTimeout(() => {
            _this.loadingIns = false
            _this.pickInstitutionList = res.data.map(item => {
              return {
                value: item.institutionId,
                label: item.institutionName
              }
            })
          }, 200)
        })
        .catch(error => {
          _this.pickInstitutionList = []
          console.error(error)
        })
    },
    institutionChange () {
      let _this = this
      _this.appointForm.insOfficeId = "";
      _this.listInsOffice(_this.appointForm.institutionId)
    },
    listInsOffice (institutionId) {
      let _this = this
      _this.pickInsOfficeList = [];
      let cond = {
        institutionId: institutionId
      }
      OfficeApi.getOfficeNames(cond)
        .then(res => {
          setTimeout(() => {
            _this.pickInsOfficeList = res.data.map(item => {
              return {
                value: item.officeId,
                label: item.officeName
              }
            })
          }, 200)
        })
        .catch(error => {
          _this.pickInsOfficeList = []
          console.error(error)
        })
    },
    sureReportClick () {
      this.$refs.appointForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            this.alterReport()
          })
        }
      })
    },
    alterReport () {
      let _this = this
      let appointFormData = {
        itemId: this.$route.query.id,
        itemName: _this.appointForm.itemName,
        institutionId: _this.appointForm.institutionId,
        insOfficeId: _this.appointForm.insOfficeId,
        insItemCode: _this.appointForm.insItemCode,
        firstClassifyId: _this.pickClassifyIdList[0],
        classifyId: _this.pickClassifyIdList[1],
        itemPrice: _this.appointForm.itemPrice,
        itemProcess: _this.appointForm.itemProcess,
        itemNote: _this.appointForm.itemNote,
        itemMeaning: _this.appointForm.itemMeaning,
        itemTime: _this.appointForm.itemTime
      }
      AppointItemApi.editAppointItem(appointFormData)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    getData () {
      AppointItemApi.getAppointItemInfo({
        itemId: this.$route.query.id
      }).then(res => {
        this.$Utils.bindingBean(this.appointForm, res.data)
        if (res.data.institutionId){
          this.appointForm.institutionId = parseInt(res.data.institutionId)
          this.listInsOffice(this.appointForm.institutionId)
        }
        if (res.data.insOfficeId){
          this.appointForm.insOfficeId = parseInt(res.data.insOfficeId)
        }
        this.pickClassifyIdList = [String(res.data.firstClassifyId),String(res.data.classifyId)];
      })
    },
    returnList () {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/appoint/itemManagement' })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
